<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
<div id="wrap">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="./main.html" class="navbar-brand">在线珠宝商城</a>

            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="navbar navbar-default">
            <div class="container-fluid">
                <ol class="breadcrumb navbar-left navbar-btn">
                    <span>你当前所在的位置：</span>
                    <li>我的收藏</li>
                </ol>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul class="media-list" v-for="product in this.productList">
                            <li class="media">
                                <div class="media-left media-middle">
                                    <a :href="'jewelry-detail.html?productId='+product.productId"><img
                                            class="media-object"
                                            :src="'http://localhost:8080/images/'+product.imageUrl"
                                            alt="图片"
                                            style="width:150px"></a>
                                </div>
                                <div class="media-body">
                                    <a :href="'jewelry-detail.html?productId=' + product.productId"><h5 class="text-primary">{{product.productName}}</h5>
                                    </a>
                                    <hr>
                                    <p class="small text-muted">材质：<span>{{product.material}}</span></p>
                                    <p class="small text-muted">颜色：<span>{{product.color}}</span>
                                        重量：<span>{{product.weight}} 克拉</span></p>
                                    <p class="small text-muted">纯度：<span>{{product.purity}}</span></p>
                                    <p class="small text-muted">工艺：<span>{{product.craftsmanship}}</span></p>
                                    <p>{{product.certification}}</p>
                                    <p>{{product.desc}}</p>
                                    <p>
                                        <del >￥{{product.price}}</del>
                                        <strong style="color:red">￥{{product.jprice}}</strong> 节省：{{product.price
                                        - product.jprice}}
                                        <a href="" class="btn btn-danger" @click.prevent="putCart(product.productId)">加入购物车</a>
                                        <a href="" class="btn btn-danger" @click.prevent="removeSC(product.productId)">取消收藏</a>
                                    </p>
                                </div>
                            </li>
                            <hr>

                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#wrap",
        data: {
            productList:[],
            user: null

        },
        created() {
            this.isLogin();
            let bn = location.search;
            console.log(bn)
            axios.get("/showcang/all")
                .then(resp => {
                    this.productList = resp.data;
                    console.log(this.productList)
                }).catch(error => {
                console.log(error);
            });

        },
        methods: {
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            isLogin() {
                axios.get('/user').then(res => {
                    if (res.data.data === null) {
                        alert("请先登录！");
                        location.href = '../login.html';
                    } else {
                        this.user = res.data.data;
                    }
                });
            },

            putCart(productId) {
                if (this.user === null) {
                    alert('请先登录！');
                    location.href = '../login.html';
                    return;
                }
                console.log(productId)
                axios.get("/cart/putCart?productId=" + productId)
                location.href = "/front/cart/cart.html"
            },
            removeSC(productId){
                axios.delete("/showcang/" + productId)
                    .then(resp=>{
                        if (resp.data.message == "success") {
                            alert("删除成功");
                            window.location.reload();
                        }
                        if (resp.data.message == "error"){
                            alert("删除失败")
                        }
                    })
            }
        }
    })
</script>
</body>
</html>